import React, { useRef, useState } from 'react';
import { Button, ConfigProvider, Flex } from 'antd';
import styles from './index.module.less';


import Draggable, { DraggableEventHandler } from 'react-draggable';
import { split } from 'lodash';
import { IssuesCloseOutlined, StopOutlined } from '@ant-design/icons';
const menuItems = [
  {
    title: "服务",
    url: "url",
    color: "#fa8c16",
    slef: true,
  },
  {
    title: "服务1",
    url: "url",
    color: "#fa8c16",
    slef: true,
  },
  {
    title: "服务2",
    url: "url",
    color: "#fa8c16",
    slef: true,
  },
  {
    title: "服务3",
    url: "url",
    color: "#fa8c16",
    slef: true,
  }
]
const App: React.FC = () => {
  // console.log("0000",styles)
  const [open, setOpen] = useState(false);
  const startTime = useRef(0);
  // 关闭findDOMNode is deprecated警告
  const nodeRef = useRef<HTMLUListElement>(null);
  const handleStart: DraggableEventHandler = (e) => {
    startTime.current = e.timeStamp;
  }
  const handleStop: DraggableEventHandler = (e) => {
    const diffTime = e.timeStamp - startTime.current;
    if (diffTime < 200) {
      setOpen(!open);
    }
  }
  return (
    <Draggable
      nodeRef={nodeRef}
      bounds="body"
      handle={`.${styles.float_menu_toggle}`}
      onStart={handleStart}
      onStop={handleStop}
    >

      <ul ref={nodeRef} className={`${styles.float_menu} ${open ? styles.float_menu_open : ''}`}>
        <a className={`${styles.float_menu_toggle}`}>
          {
            open ? <IssuesCloseOutlined style={{ fontSize: 18 }} /> : <StopOutlined style={{ fontSize: 24 }} />
          }
        </a>
        <div className={styles.float_menu_mask}></div>
        {
          menuItems.map((item,index)=> {
            console.log("hah",split(item.title,''))
            const delay = `${index*0.1}s`;
            const rotate = `${(360/menuItems.length)*index}deg`;
            return (
              <li className={styles.float_menu_item}
              key={index}
              style={{
                transitionDelay:delay,
                transform:open?`rotate(${rotate}) translateX(-100px)`:'rotate(0deg) translateX(0)',
                opcity:open?1:0,
                // @ts-ignore
                '--float-menu-hover-color':item.color,
              }}
              >
                <a 
                style={{transform:`rotate(-${rotate}) translateX(0)`,color:item.color}}
                target={item.slef?"_slef":"_blank"}
                rel="noreferrer"
                >
                  {
                    split(item.title,'').map((item2,index2)=> {
                      // console.log("每一项",item2,index2)

                      return <span key={index2}>{item2}</span>
                    })
                  }
                </a>
              </li>
            )
          })
        }
      </ul>
    </Draggable>
  );
};

export default App;